<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2023-07-24 15:02:09
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-26 17:25:33
-->
<template>
  <CDialog
    title="关联因子库"
    append-to-body
    :close-on-click-modal="false"
    destroy-on-close
    :width="1200"
    v-model:visible="dialogVisible"
    :footer="false"
    size="auto"
  >
    <div class="factor-dialog-container">
      <div class="header">
        <div>
          <el-input
            class="header-input"
            placeholder="因子名称"
            v-model="searchForm.factorName"
            clearable
            :suffix-icon="SearchIcon"
          />
          <GSelect
            class="header-unit"
            placeholder="单位"
            :value="taskForm.dataUnit"
            disabled
          ></GSelect>
          <GSelect placeholder="因子类型" v-model="searchForm.type" clearable>
            <el-option
              v-for="item in factorTypeOptionx"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </GSelect>
          <GSelect placeholder="因子来源分类" v-model="searchForm.sourceType" clearable>
            <el-option
              v-for="item in FactorSourceTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </GSelect>
          <GSelect placeholder="版本号" v-model="searchForm.version" clearable>
            <el-option v-for="item in versionList" :key="item" :label="item" :value="item" />
          </GSelect>
        </div>

        <div id="factor-simple-page"></div>
      </div>
      <CTable
        :pagination="{
          teleport: '#factor-simple-page',
          layout: 'total, prev, slot, next'
        }"
        :loadData="loadData"
        ref="tableRef"
        @cell-dblclick="handleDbclick"
      >
        <vxe-column title="因子名称" min-width="200">
          <template #default="scope">
            {{ empty(scope.row.factorName) }}
          </template>
        </vxe-column>
        <vxe-column title="因子单位" min-width="100">
          <template #default="scope">
            {{ empty(scope.row.unit) }}
          </template>
        </vxe-column>
        <vxe-column title="因子类型" min-width="100">
          <template #default="scope">
            {{ factorTypeEnumx[scope.row.type] }}
          </template>
        </vxe-column>
        <vxe-column title="因子来源分类" width="150">
          <template #default="scope">
            {{ FactorSourceTypeMap[scope.row.sourceType] }}
          </template>
        </vxe-column>
        <vxe-column title="版本号" width="200" show-overflow="tooltip">
          <template #default="scope">
            <p v-ellTooltip>{{ scope.row.version }}</p>
          </template>
        </vxe-column>
        <vxe-column title="操作" width="80" align="center">
          <template #default="scope">
            <el-button type="primary" text @click="handleClick(scope.row)">关联</el-button>
          </template>
        </vxe-column>
      </CTable>
    </div>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'CFactorDialog'
};
</script>
<script lang="ts" setup>
import {
  defineComponent,
  withDefaults,
  defineProps,
  computed,
  defineEmits,
  ref,
  watch,
  h
} from 'vue';
import { CDialog } from '@/components/CDialog/index';
import { CTable } from '@/components/CTable/index';
import { useFactorList } from './useFactorDialog';
import { empty } from '@/utils/index';
import { GSelect } from '@/components/GSelect/index';
import {
  factorTypeEnumx,
  FactorSourceTypeMap,
  factorTypeOptionx,
  FactorSourceTypeOption
} from '@/constants/enum';
import { getVersionList } from '@/apis/system/config/factorList';
import { GIcon } from '@/components/GIcon/index';

// 搜索图标
const SearchIcon = defineComponent({
  setup() {
    return () => h(GIcon, { type: 'c-xian-sousuo', style: 'font-size: 14px' });
  }
});

interface IDialogProps {
  visible: boolean;
  taskForm: any;
  selectRow: any;
}
const props = withDefaults(defineProps<IDialogProps>(), {
  taskForm: () => ({}),
  selectRow: () => ({})
});
const emit = defineEmits(['update:visible', 'finish']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
const { loadData, searchForm, tableRef } = useFactorList();
const versionList = ref<any[]>([]);
watch(
  () => dialogVisible.value,
  val => {
    searchForm.factorName = props.taskForm.materialName;
    searchForm.dataUnit = props.taskForm.dataUnit;
  }
);

getVersionList().then(res => {
  versionList.value = res;
});
const handleClick = (row: any) => {
  let selectRow = props.selectRow;
  selectRow.factorName = row.factorName;
  selectRow.factorNo = row.factorNo;
  emit('finish', selectRow);
  dialogVisible.value = false;
};
const handleDbclick = ({ row }) => {
  handleClick(row);
};
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  :deep(.el-select) {
    width: 128px;
    margin-right: 10px;
  }
  .header-unit {
    width: 128px;
    margin: 0 10px;
  }
  .header-input {
    width: 192px;
    height: 32px;
  }
}
.factor-dialog-container {
  padding-bottom: 20px;
}
</style>
